<!--
 * @Author: pancc 527847805@qq.com
 * @Date: 2023-04-18 09:53:47
 * @LastEditors: pancc 527847805@qq.com
 * @LastEditTime: 2023-04-18 15:29:07
 * @FilePath: \pcj\src\page\whs\whInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
    <el-container class="whinfo">
        <el-aside class="whinfo-dep">
            <z-button icon="xinzeng" @click="onWhInfoEdit()" class="mb-10" v-if="purview(2)">新增仓库</z-button>
            <p class="prompt">红色代表被禁用或删除</p>
            <template v-for="n in fromQuery.whInfos" :key="n.id">
                <p class="dis-flex flex-x-between w-100 dtype" :style="n.isChecked ? 'background-color: #f5f7fa' : ''"
                    @click="onWhInfoEdit(n, true)">
                    <span :style="(n.statusId === 2 || n.statusId === 3) ? 'color: red' : ''">{{ n.whInfoName }}</span>
                    <span v-if="n.id > 0">
                        <el-button type="primary" link @click="onWhInfoEdit(n)" v-if="purview(3)">修改</el-button>
                        <!-- <el-button type="danger" link @click="onWhInfoDel(n.id)" v-if="purview(4)">删除</el-button> -->
                    </span>
                </p>
            </template>
        </el-aside>
        <el-main class="whinfo-main flexible">
            <ul class="header-buttons">
                <li>
                    <z-button icon="add" @click="onWhInfoStorageEdit()" v-if="purview(2)">添加明细</z-button>
                </li>
                <li class="dis-flex">
                    <p>
                    </p>
                </li>
            </ul>
            {{ fromQuery.whInfoStorages }}
            <el-table :data="fromQuery.whInfoStorages" border stripe ref="tableRef" class="flexible-table">
                <el-table-column type="index" label="序号" align="center" width="60" />
                <el-table-column label="仓库" prop="whInfoName" align="center" />
                <el-table-column label="库位编号" prop="storageSerialNo" align="center" />
                <el-table-column label="库位名称" prop="stroageName" align="center" />
                <el-table-column label="状态" prop="statusName" align="center" />
                <el-table-column label="是否默认" prop="isDefalut" align="center">
                    <template #default="scope">
                        {{ scope.row.isDefault ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="operate" align="center">
                    <template #default="scope">
                        <z-button icon="xiugai" size="small" title="编辑" @click="onWhInfoStorageEdit(scope.row)"
                            v-if="purview(3)"></z-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>

        <whInfoEdit v-model="dialog.whInfoShow" v-model:editData="dialog.whInfoData" @onSave="onWhInfoback" />
        <whInfoStorageEdit v-model="dialog.whInfoStorageShow" v-model:editData="dialog.whInfoStorageData"
            @onSave="onWhInfoStorageback" />
    </el-container>
</template>

<script setup>
import { get, post } from '@/api/index';
import whInfoEdit from './components/whInfoEdit.vue';
import whInfoStorageEdit from './components/whInfoStorageEdit.vue';
import { reactive } from 'vue';
let { dataProcess, purview } = inject('$global');

// 页面全局
let fromQuery = reactive({
    defaultWhInfoId: 0,
    whInfos: [],
    whInfoStorages: []
});

// 弹框参数
let dialog = reactive({
    whInfoShow: false,
    whInfoData: {},
    whInfoStorageShow: false,
    whInfoStorageData: {}
});

// 查询仓库
const getWhInfos = async () => {
    const { result } = await post('WhInfo/GetList', {});
    fromQuery.whInfos = result.map(n => {
        return {
            ...n,
            isChecked: false
        }
    })
}

// 查看或编辑仓库
const onWhInfoEdit = (val = {}, isOnlyShow) => {
    if (val !== {} || isOnlyShow) {
        fromQuery.whInfos.map(n => {
            n.isChecked = (n.id === val.id);
        });
        fromQuery.defaultWhInfoId = val.id;
        getWhInfoStorages();
    }

    if (!isOnlyShow) {
        dialog.whInfoData = val;
        dialog.whInfoShow = true;
    }
}

// 关闭弹框回写
const onWhInfoback = () => {
    getWhInfos()
    dialog.whInfoShow = false;
}

// 查询库位
const getWhInfoStorages = async () => {
    if (fromQuery.defaultWhInfoId === 0) {
        return;
    }
    const { result } = await post('WhInfoStorage/GetList', { whInfoId: fromQuery.defaultWhInfoId });
    fromQuery.whInfoStorages = result;
}

// 编辑库位
const onWhInfoStorageEdit = (val = {}) => {
    dialog.whInfoStorageData = val;
    dialog.whInfoStorageData["whInfos"] = fromQuery.whInfos;
    dialog.whInfoStorageShow = true;
}


// 关闭弹框回写
const onWhInfoStorageback = (val) => {
    fromQuery.defaultWhInfoId = val.whInfoId;
    dialog.whInfoStorageShow = false;
    getWhInfoStorages();
}

onActivated(async () => {
    getWhInfos();
});
</script>

<style lang="scss" scoped>
.whinfo {
    height: 100%;

    &-dep {
        background-color: #fff;
        padding: 10px;
    }

    &-main {
        background-color: #fff;
        padding: 10px;
        margin-left: 10px;
    }

    .prompt {
        color: #adadad;
        font-size: x-small;
        margin: 5px 2px;
    }

    .header-buttons {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
    }

    .dtype {
        height: 26px;
        padding: 2px 5px;
    }

    .dtype:hover {
        background-color: #f5f7fa
    }

}
</style>